<template>
  <!-- 项目入口-详细 -->
  <el-dialog width="70%" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
    <span slot="title">
      <i class="iconfont icon-ziliao"></i>
      <span>{{ title }}</span>
    </span>

    <el-form :model="formBaseData" ref="formBaseData" class="small-lineHeight-form" :rules="formBaseRules" style="position: relative">
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="title" :label-width="formlabelWidth">
            <el-input class="contract-ele-long" v-model="formBaseData.title" placeholder="标题" :disabled="detailType === 'check'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="所属项目" prop="projectId" :label-width="formlabelWidth">
            <el-select class="select" v-model="selectProject" filterable placeholder="请选择所属项目" :disabled="detailType === 'check'" clearable @change="onSelect">
              <el-option v-for="(item, i) in projectOptions" :key="i" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="路由地址" prop="route" :label-width="formlabelWidth">
            <el-input class="contract-ele-long" v-model="formBaseData.route" placeholder="路由地址" :disabled="detailType === 'check'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="封面图片" :label-width="formlabelWidth" prop="imgList">
            <cmsUploadFileView ref="fileOneImg" :detail-id="detailId" :fileSystem="fileSystemImg['one']" :disabled="detailType!=='build'&&detailType!=='edit'" type="mul" :fileList="fileList" info="支持上传 png/jpg/jpeg 文件" :detail-type="detailType" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <!--api操作按钮 除去上报-->
      <!--新建和编辑的暂存上报-->

      <!--:loading="isLoading" -->
      <template v-if="detailType === 'build' || detailType === 'edit'">
        <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', { flag: 1 },$event)"><i class="iconfont icon-icon_save"></i> 确 定
        </el-button>
      </template>
      <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import projectEntrance from '@/api/buss/projectEntrance.js'
export default {
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },
  data() {
    return {
      formShow: false, // 表单展示
      title: '新增',
      formlabelWidth: '163px', // 表单左侧标题宽度
      projectOptions: [],
      activeName: 'first',
      detailType: '',//类型
      detailId: '',
      formBaseRules: {
        title: [{ required: true, message: '请选择标题', trigger: 'blur', }]
      },
      selectProject: '',
      formBaseData: {
        title: '',
        projectId: '',
        projectName: '',
        route: ''
      },
      fileSystemImg: {
        'one': {
          sys: 'buss',
          module: 'projectEntrance',
          part: 'one',
          compoName: 'fileOneImg'
        },
      },
      fileList: [],
      isLoading: false,
    }
  },
  watch: {
    postDetail(value) {
      this.projectOptions = this.$parent.projectOptions
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.detailId = value.detailId || ''
      this.title = value.typeName
      if (this.detailType == 'build') {
        //新建
        this.$set(this, 'fileList', [])
      } else {
        //详情
        this.getOne()
      }
    }
  },
  methods: {
    getOne() {
      projectEntrance.getOne(this.detailId).then(res => {
        let { data, messag, status } = res
        if (status == 1) {
          for (let key in this.formBaseData) {
            this.formBaseData[key] = data[key]
          }
          this.$set(this.formBaseData, 'id', data.id)
          if (data.projectName && data.projectId) {
            this.selectProject = `${data.projectName}|${data.projectId}`
          } else {
            this.selectProject = ''
          }
          this.loadFiles()
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取问题归属失败")
      })
    },
    handleClickDeal(type, res, callback) {
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          if (this.activeName == 'first') {
            if (this.$refs['formBaseData'] !== undefined) {
              this.$refs['formBaseData'].resetFields()
            }
          }
          this.selectProject = ''
          for (let key in this.formBaseData) {
            this.formBaseData[key] = ''
          }
          for (let k in this.fileSystemImg) {
            let fileProp = this.fileSystemImg[k]
            this.$refs[fileProp.compoName].cancelAll()
          }
          this.formShow = false
          break;
        case 'submit':
          this.$nextTick(() => {
            this.$refs['formBaseData'].validate((valid) => {
              if (valid) {
                let flag = res.flag
                this.isLoading = true
                this.submitDetail(flag, async () => {
                  await this.saveFiles()
                  this.formShow = false
                  this.isLoading = false
                  this.$messageSuccess('保存成功')
                  // 传值给父组件刷新列表
                  setTimeout(() => {
                    this.$emit('reloadList')
                  }, 500);
                })
              } else {
                callback && callback();
                this.isLoading = false
              }
            })
          })
          break
      }
    },
    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      if (this.detailType == 'build') {
        delete this.formBaseData.id
        projectEntrance.submit(this.formBaseData).then(res => {
          let { message, status, data } = res
          if (status == 1) {
            this.detailId = data.id
            if (callback) callback()
          } else {
            this.isLoading = false
            this.$messageError(message)
          }
        }).catch(res => { }).finally(res => {
          callback && callback();
        })
      } else if (this.detailType == 'edit') {
        projectEntrance.resubmit(this.formBaseData).then(res => {
          let { message, status, data } = res
          if (status == 1) {
            this.detailId = data.id
            if (callback) callback()
          } else {
            this.isLoading = false
            this.$messageError(message)
          }
        })
      }
    },
    loadFiles() {
      this.$nextTick(() => {
        for (let k in this.fileSystemImg) {
          let fileProp = this.fileSystemImg[k]
          this.$refs[fileProp.compoName].init()
        }
      })
    },
    onSelect(val) {
      if (val) {
        let arr = val.split('|')
        this.formBaseData.projectId = arr[1]
        this.formBaseData.projectName = arr[0]
      } else {
        this.formBaseData.projectId = ''
        this.formBaseData.projectName = ''
      }
    },
    async saveFiles() {
      for (let k in this.fileSystemImg) {
        let fileProp = this.fileSystemImg[k]
        await this.$refs[fileProp.compoName].saveAll(this.detailId)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
